iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

React基礎系列 第 11

第十一天,React的props與state(上)

  • 分享至 

  • xImage
  •  

React的props與state(上)

props 的資料結構就是一個物件JavaScript Object,就像是var props={name:'jacky',age:29}由父元件呼叫子元件時賦與子元件數值,在子元件中props不可以改變。
取用參數時用this.props.變數名稱,即可取用。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ButtonTest from './buttonTest';

ReactDOM.render(
  <div>
    <ButtonTest name="Andy" age="21" />
  </div>
  ,document.getElementById('root')
);

子元件ButtonTest

import React from "react";

class ButtonTest extends React.Component {
      constructor(props){
        super(props);
		console.log('message',this.props.name);
		}

      
      render() {
          return <button onClick={this.handleEdit}>编辑</button>
      }

}
export default ButtonTest;

在index.js中會讀取ButtonTest元件,並傳入二個參數name及age到ButtonTest元件。


上一篇
第10天,React三種使用CSS方法
下一篇
第11天,React的props與state(下)
系列文
React基礎12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言